<template>
  <div class="article-detail" v-if="article">
    <!-- 标题区域 -->
    <div class="details-title">
      <h1>{{ article.title }}</h1>
      <p>
        更新时间：{{ formatDate(article.updated_at) }} &nbsp;
        点击次数：<span class="clicks">{{ article.clicks }}</span>
      </p>
    </div>

    <!-- 富文本内容区域 -->
    <div class="details-con" v-html="article.content"></div>

    <!-- 上下篇导航 -->
    <div class="page-nav" v-if="hasNav">
      <div v-if="prevArticle" class="prev">
        <router-link :to="`/news/article/${prevArticle.id}`">上一条：{{ prevArticle.title }}</router-link>
      </div>
      <div v-if="nextArticle" class="next">
        <router-link :to="`/news/article/${nextArticle.id}`">下一条：{{ nextArticle.title }}</router-link>
      </div>
    </div>
  </div>
  <div v-else>加载中...</div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRoute } from "vue-router";

const mockArticles = [
  {
    id: 1,
    title: '美业新趋势：科技赋能美丽生活',
    content: '<p>科技正在深刻改变美业，智能护肤、AI造型等新技术不断涌现。<img src="https://picsum.photos/seed/beauty1/600/300"></p>',
    clicks: 123,
    updated_at: '2024-07-01 10:00:00',
    category: 'industry'
  },
  {
    id: 2,
    title: '夏季护肤小贴士，专家为你支招',
    content: '<p>炎炎夏日，如何科学护肤？皮肤科专家为你详细解答。</p>',
    clicks: 88,
    updated_at: '2024-07-15 09:30:00',
    category: 'industry',
  },
  {
    id: 3,
    title: '品牌故事：从小作坊到美业连锁',
    content: '<p>见证一个美业品牌的成长之路，创业者分享心路历程。</p>',
    clicks: 66,
    updated_at: '2024-07-25 14:20:00',
    category: 'company',
  }
]

const route = useRoute();
const article = ref<any>(null);
const prevArticle = ref<any>(null);
const nextArticle = ref<any>(null);

const loadArticle = () => {
  const id = Number(route.params.id);
  const idx = mockArticles.findIndex(a => a.id === id);
  article.value = mockArticles[idx] || null;
  prevArticle.value = idx > 0 ? mockArticles[idx - 1] : null;
  nextArticle.value = idx < mockArticles.length - 1 ? mockArticles[idx + 1] : null;
};

loadArticle();

// 监听路由参数变化，自动加载新内容
watch(() => route.params.id, () => {
  loadArticle();
});

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
}

const hasNav = computed(() => {
  return prevArticle.value || nextArticle.value;
});
</script>

<style scoped>
.article-detail {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.details-title {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.details-title h1 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #333;
}

.details-title p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.clicks {
  color: #f00;
  font-weight: bold;
}

.details-con {
  line-height: 1.8;
  color: #333;
}

/* 富文本中的图片样式 */
.details-con img {
  max-width: 100%;
  height: auto;
  margin: 15px 0;
  border-radius: 4px;
}

/* 上下篇导航样式 */
.page-nav {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.page-nav .prev {
  text-align: left;
  flex: 1;
}

.page-nav .next {
  text-align: right;
  flex: 1;
}

.page-nav a {
  color: #0066cc;
  text-decoration: none;
}

.page-nav a:hover {
  text-decoration: underline;
}
</style>